<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <!--    bootstrap-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!--    summernote-->
    <link href="/css/summernote.css" rel="stylesheet">
    <script src="/js/summernote.js"></script>

    <style>
        /* The alert message box */
        .alert {
            padding: 20px;
            background-color: #f44336; /* Red */
            color: white;
            margin-bottom: 15px;
        }

        /* The close button */
        .closebtn {
            margin-left: 15px;
            color: white;
            font-weight: bold;
            float: right;
            font-size: 22px;
            line-height: 20px;
            cursor: pointer;
            transition: 0.3s;
        }

        /* When moving the mouse over the close button */
        .closebtn:hover {
            color: black;
        }
    </style>

</head>
<body>
<!--导航栏-->
<!-- Links -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">今日头条</a>
        </div>
        <div>
            <!--向右对齐-->
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        发布作品 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="./publish_article.html">发布文章</a></li>
                        <li><a href="./publish_album.html">发布相册</a></li>
                        <li><a href="./publish_micro.html">发布微动态</a></li>
                        <li><a href="publish_questions_Answers.html">发布问答</a></li>
                        <li><a href="./publish_video.html">发布视频</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="navbar-nav navbar-right">
            <p class="navbar-text ">滕老师</p>
        </div>

    </div>
</nav>
<form>
    <div class="alert" v-if="uploadStatus">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        正在处理上传数据，请稍后。
    </div>
    <div class="container" id="app" style="width: 400px;">
        <div class="register_main" style="text-align:center; border: 1px solid black">
            <h2>用户注册</h2>
            <br>
            用户名: <input placeholder="在此输入手机号" type="text" v-model:name="user.username">
            <hr>
            昵称: <input placeholder="在此输入昵称" type="text" v-model:name="user.nickname">
            <hr>
            密码: <input placeholder="在此输入密码" type="password" v-model:name="user.password">
            <hr>
            确认密码: <input placeholder="再次输入密码" type="password" v-model:name="user.confirmPassword">
            <hr>
            <input type="checkbox" v-model:name="user.userAgreement">已阅读<a href="">用户协议</a>
            <hr>
            <input @click="submitForm()" name="register_request" style="margin-bottom: 20px" type="button" value="申请注册">
        </div>
    </div>
</form>


<!--Vue和axios-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "form",
        data: {
            uploadStatus: false,
            user: {
                username: '',
                nickname: '',
                password: '',
                confirmPassword: '',
                desc: '',
                userAgreement: false
            }
        },
        methods: {
            submitForm: function () {
                if (this.user.password === this.user.confirmPassword) {
                    if (this.user.userAgreement) {
                        console.log(v.user)
                        this.uploadStatus = true;
                        axios.post("/wemedia/ddUser/register", v.user).then(function (response) {
                            console.log(response.data);
                            if (response.data.state !== 200) {
                                v.uploadStatus = false;
                                alert(response.data.message);
                            } else {
                                alert("注册成功，将返回首页");
                                location.href = "index.html";
                            }
                        })
                    } else {
                        console.log(v.user)
                        alert("请阅读并同意用户协议")
                    }
                } else {
                    alert("两次输入的密码不一致")
                }
            }
        }
    })

</script>
</body>
</html>